@active-color: #409EFF;

// 右键按钮样式
.vue-contextmenu-listWrapper {
  padding: 5px 0 !important;
  box-shadow: 0 0 10px #ddd !important;

  .btn-wrapper-simple {
    height: 24px !important;
    line-height: 24px !important;
  }

  .child-ul-wrapper {
    padding: 5px 0 !important;
  }

  .no-child-btn {
    padding: 0 10px !important;
  }

  .nav-name-right {
    height: 24px !important;
    line-height: 24px !important;
    margin: 0 10px !important;
  }

  .parent-name .icon {
    top: 7px !important;
  }

  .context-menu-list {
    .has-child {
      padding: 0 10px !important;
    }
  }
}

.flow-container {
  width: 10000px;
  height: 10000px;
  position: relative;
  transition: transform 0.5s ease 0s, transform-origin 0.5s ease 0s;

  &.grid {
    background: url("../images/grid-bg.jpg") repeat left top;
    background-size: 60px 60px;
  }

  &.canDrag {
    cursor: grab;
  }

  &.canMultiple {
    cursor: url("../images/multip-pointer.png"), default;
  }
}

.rectangle-multiple {
  position: absolute;
  border: 1px dashed #31676f;
}

.flow-container-active {
  background-color: #e4e4e4;
  cursor: crosshair;
}

.auxiliary-line-x {
  position: absolute;
  border: 0.5px solid @active-color;
  width: 100%;
  z-index: 9999;
}

.auxiliary-line-y {
  position: absolute;
  border: 0.5px solid @active-color;
  height: 100%;
  z-index: 9999;
}

.link-active {
  outline: 2px dashed @active-color;
}

.container-scale {
  position: absolute;
  top: 10px;
  left: 10px;

  >span {
    display: inline-block;
    width: 40px;
    text-align: center;
  }
}

.mouse-position {
  position: absolute;
  bottom: 0;
  right: 5px;
}

.common-remarks {
  width: 100px;
  height: 150px;
  position: absolute;
  background-color: #ffffaa;
}
